<template>
    <div class="in">
        <div class="w1">
            <p>选择头像</p>
            <p @click="close">X</p>
        </div>
        <div class="w2">
            <div class="w2_1" v-for="it,i in headportrait" :key="i" @click="focuss(it,i)" :style="{border: focus === i?'1px solid #00c3ff':''}">
                <img :src="it" alt="">
            </div>
        </div>
        <div class="w4">
            <div class="an1" @click="close">取消</div>
            <div class="an2" @click="determine">确定</div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['Negativeone'],
    data() {
        return {
            focus: this.Negativeone,
            img: '',
            headportrait: [
                'https://img-static.mihoyo.com/communityweb/upload/355f756ce3c1b8c7a0e887f93a2826c6.png',
                'https://img-static.mihoyo.com/communityweb/upload/5f673be35167d4cd5126978fdf36d9a6.png',
                'https://img-static.mihoyo.com/communityweb/upload/fea87bd29255f2bf68cdf2a777025cdc.png',
                'https://img-static.mihoyo.com/communityweb/upload/ed8f2ab21c2ae56989ac0482eb533a99.png',
                'https://img-static.mihoyo.com/communityweb/upload/0510e794bed52c2b426a561cd3ffae0d.png',
                'https://img-static.mihoyo.com/communityweb/upload/9c7ca480aab8665e16405da31a6f828b.png',
                'https://img-static.mihoyo.com/communityweb/upload/0769e9d5dee3a6ba5746b637b7f9aca7.png',
                'https://img-static.mihoyo.com/communityweb/upload/bc0bd4bbc6da6ab930f64652868a033f.png',
                'https://img-static.mihoyo.com/communityweb/upload/a9648524739dcbed8deaedd1f1a2a78f.png',
                'https://img-static.mihoyo.com/communityweb/upload/c9daa767b5827187d9f8186d8bbf3d2c.png',
                'https://img-static.mihoyo.com/communityweb/upload/29fab2f6cec22b79225726a73f1741c0.png',
                'https://img-static.mihoyo.com/communityweb/upload/9b3ba0955f25001047823e3ad904c87d.png',
                'https://img-static.mihoyo.com/communityweb/upload/191f5fa44e2815c538f1036330e4093d.png',
                'https://img-static.mihoyo.com/avatar/avatar12.png',
                'https://img-static.mihoyo.com/avatar/avatar13.png',
                'https://img-static.mihoyo.com/avatar/avatar14.png',
                'https://img-static.mihoyo.com/avatar/avatar15.png',
                'https://img-static.mihoyo.com/avatar/avatar16.png',
                'https://img-static.mihoyo.com/avatar/avatar17.png',
                'https://img-static.mihoyo.com/avatar/avatar18.png',
                'https://img-static.mihoyo.com/avatar/avatar19.png',
                'https://img-static.mihoyo.com/avatar/avatar20.png',
                'https://img-static.mihoyo.com/communityweb/upload/c9d11674eac7631d2210a1ba20799958.png'
            ],
        }
    },
    mounted() {
        // console.log('哈哈哈');
        console.log(this.focus);
    },
    methods: {
        close() {
            this.$emit("Statusoh", false)
        },
        determine() {
            this.focus = -1
            this.$emit("imgStatusoh", this.img,false)
        },
        focuss(it,i) {
            this.focus = i
            this.img = it
        }
    }
}
</script>

<style lang="less" scoped>
    .in {
        // border: 1px solid red;
        opacity: 1;
        border-radius: 10px;
        width: 600px;
        // height: 600px;
        background-color: white;
        position: relative;
        .w1 {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            p {
                font-weight: bolder;
                margin-left: 20px;
            }
            p:nth-last-child(1) {
                margin-right: 20px;
                color: #999;
                cursor: pointer;
            }
        }
        .w2 {
            overflow-y: scroll;
            // overflow: scroll;
            height: 300px;
            display: flex;
            padding: 10px;
            flex-wrap: wrap;
            .w2_1 {
                // border: 1px solid red;
                margin-top: 10px;
                margin-left: 17px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 6px;
                img {
                    object-fit: cover;
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    cursor: pointer;
                }
            }
        }
        .w4 {
            margin-top: 20px;
            padding-bottom: 20px;
            display: flex;
            align-items: center;
            bottom: 100px;
            left: 33%;
            justify-content: center;
            .an1 {
                border: 1px solid #999;
                width: 100px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                // text-align: center;
                border-radius: 4px;
                padding: 2px;
                font-size: 14px;
                margin-right: 10px;
                cursor: pointer;
            }
            .an2 {
                background-color: #00c3ff;
                width: 100px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 4px;
                padding: 2px;
                font-size: 14px;
                margin-right: 10px;
                cursor: pointer;
            }
        }
    }
</style>